<template>
	<div class="list-body">
		<ul class="list" v-if="list.length">
			<li v-for="(item, idx) in list" :key="idx">
				<div class="flex flex-align-center">
					<span>{{ item.appoint_date }}</span>
					<div class="ellipsis dept">{{ item.dept_name }}</div>
					<span
						class="status"
						:class="{
							success: item.status == 2,
							danger: item.status == 3,
							info: item.status == 4,
							warning: item.status == 5
						}"
					>
						{{ item.status_text }}
					</span>
				</div>
				<div class="service-list" v-if="item.service_info">
					<div
						v-for="(service, serviceIdx) in item.service_info"
						:key="serviceIdx"
						class="flex"
					>
						<span class="sn">{{ serviceIdx + 1 }}、</span>
						<p class="flex-1 ellipsis">【{{ service.name }}】</p>
						<span class="price"> ￥{{ service.unit_price | toFixed }} </span>
					</div>
				</div>
				<div class="flex flex-align-center remark" v-if="item.remarks">
					<span>备注：</span>
					<p class="flex-1 ellipsis">{{ item.remarks }}</p>
				</div>
				<div class="flex flex-justify-end opts">
					<button class="danger" v-if="item.status == 1" @click="runoff(item)">
						流失
					</button>
					<button
						class="primary"
						v-if="![2, 4].includes(item.status)"
						@click="toAppoint(item, 'edit')"
					>
						改约
					</button>
				</div>
			</li>
		</ul>
		<cl-empty icon="order" v-else>
			<template #tips>
				暂无预约,
				<el-button type="text" @click="toAppoint()" :disabled="!!Number(detail.inherit_id)">
					立即预约
				</el-button>
			</template>
		</cl-empty>
	</div>
</template>
<script>
import { Dialog } from "vant";

export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			list: []
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			const { cus_id, biz_id } = this.detail;
			const { list } = await this.$service.cart.page({
				cus_id,
				biz_id,
				search_type: 7
			});
			this.list = list;
		},
		// 派单流失
		async runoff(item) {
			let { biz_id, cart_id } = item;
			Dialog.confirm({
				title: "提示",
				message: "是否执行此操作?",
				confirmButtonColor: "#156DFF"
			})
				.then(async () => {
					await this.$service.cart.runoff({
						biz_id,
						cart_id
					});
					this.$message.success("流失成功");
					this.getList();
				})
				.catch(() => {});
		},
		async toAppoint(data = {}, type = "add") {
			const { cus_id, biz_id, cus_name, cus_mobile, cus_type, dept_id } = this.detail;
			// if (type == "add") {
			// 	if (!cus_mobile || !dept_id) {
			// 		const promptStr =
			// 			!cus_mobile && !dept_id
			// 				? "所属门店和手机号"
			// 				: !cus_mobile
			// 				? "手机号"
			// 				: "所属门店";
			// 		Dialog.confirm({
			// 			title: "提示",
			// 			message: `客户信息未完善，请完善客户的${promptStr}!`,
			// 			confirmButtonColor: "#156DFF"
			// 		})
			// 			.then(() => {
			// 				this.$router.push({
			// 					path: "/mobile/cus/edit",
			// 					query: this.detail
			// 				});
			// 			})
			// 			.catch(() => {});
			// 		return;
			// 	}
			// 	const { total } = await this.$service.deposit.userInfo({
			// 		cus_id
			// 	});
			// 	if (Number(total) <= 0) {
			// 		//需要下定金
			// 		Dialog.confirm({
			// 			title: "提示",
			// 			message: "需要先下定金！",
			// 			confirmButtonColor: "#156DFF"
			// 		})
			// 			.then(() => {
			// 				this.$router.push({
			// 					path: "/mobile/cus/deposit",
			// 					query: this.detail
			// 				});
			// 			})
			// 			.catch(() => {});
			// 		return;
			// 	}
			// }
			this.$router.push({
				name: "MobileCusAppoint",
				query: {
					cus_id,
					biz_id,
					cus_name,
					cus_mobile,
					cus_type,
					dept_id,
					...data,
					service_info: JSON.stringify(data.service_info || []),
					form_type: type,
					from_page: "MobileCusDetail"
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.list-body {
	height: 100%;
	overflow: hidden;
}
.dept {
	padding: 0 0.1rem;
	color: #999;
	flex: 1;
}
.service-list {
	font-size: 0.28rem;
	line-height: 1;
	padding-top: 0.12rem;
	> div {
		padding: 0.14rem 0;
	}
	.sn {
		color: #666;
	}
	.price {
		color: #ff3e57;
	}
}
</style>
